<template >
  <div id="div1" height=100% width=100%>
       <div>
	     顶层时间刻度：
    <select style="margin-right:20px;" onchange="changeTopTimeScale(this.value)">
        <option value="year">年</option>
        <option value="halfyear">半年</option>
        <option value="quarter">季度</option>
        <option value="month">月</option>
        <option value="tendays" >旬</option>
        <option value="week" selected>周</option>
        <option value="day">日</option>
        <option value="hour">时</option>
    </select>
    底层时间刻度：
    <select onchange="changeBottomTimeScale(this.value)" style="margin-right:20px;" >
        <option value="year">年</option>
        <option value="halfyear">半年</option>
        <option value="quarter">季度</option>
        <option value="month">月</option>
        <option value="tendays" >旬</option>
        <option value="week">周</option>
        <option value="day" selected>日</option>
        <option value="hour">时</option>
    </select>
	   </div>
       <div class="mini-toolbar" style="border-bottom:0;">        
        <a class="mini-button" plain="true" iconCls="icon-save" onclick="save()">保存</a> 
        <a class="mini-button" plain="true" iconCls="icon-print" onclick="print()">打印</a>        
        <a class="mini-button" plain="true" onclick="track()" >调试</a>                
        <span class="separator"></span>  
        <a class="mini-button" plain="true" iconCls="icon-add" onclick="addTask()">增加</a>
        <a class="mini-button" plain="true" iconCls="icon-edit" onclick="updateTask()" >修改</a>
        <a class="mini-button" plain="true" iconCls="icon-remove" onclick="removeTask()">删除</a>        
        <span class="separator"></span>
        <a class="mini-button" plain="true" iconCls="icon-upgrade" onclick="upgradeTask()">升级</a>
        <a class="mini-button" plain="true" iconCls="icon-downgrade" onclick="downgradeTask()">降级</a>        
        <span class="separator"></span>            
        <a class="mini-button" plain="true" iconCls="icon-lock" onclick="onLockClick" checkOnClick="true">锁定列</a>   
        <span class="separator"></span>      
        <a class="mini-button" plain="true" iconCls="icon-zoomin" onclick="zoomIn()">放大</a> 
        <a class="mini-button" plain="true" iconCls="icon-zoomout" onclick="zoomOut()">缩小</a>     
        <a class="mini-button" plain="true" iconCls="icon-edit" onclick="changeList()">批量修改</a> 
        <a class="mini-button" plain="true"  onclick="test()">test</a> 
		<input type="checkbox" id="showCriticalPath" checked="true" onclick="showCriticalPath(this.checked)" /><label for="showCriticalPath">显示关键路径</label>

    </div>
      <div class="mini-fit">
             <div ref="view" style="width:100%;height:100%;">
             </div>
      </div>
  </div>
</template>
<script>
import Vue from 'vue';
import DynamicSelect from './DynamicSelect.vue';

  export default {
  name: 'Gantt',
  data () {
  return {
  }
  },
  mounted () {
  this.init();
  },
  methods: {
  init() {
  
   mini.parse();
var MyTextBox = mini.Field.extend({
        type: "mytextbox",
        initComponent: function () {
            mini.Field.prototype.initComponent.call(this)
            
            const SelectComponent = Vue.extend(DynamicSelect);
            const instance = new SelectComponent();
            instance.$mount();
            this.editor=instance;
      //this.$refs.dynamicContainer.appendChild(instance.$el);
            this.el.appendChild(instance.$el);
        },
        setValue: function (value) {
            //this.jq.val(value)
            console.log(this.editor)
            this.editor.selectedValue=value;
        },
        getValue: function () {
            //return this.jq.val()
            //console.log(this.editor.selectedValue)
             return this.editor.selectedValue;     
           // return "aaa"
        },
        focus: function () {
        //    debugger
        //    mini.Field.prototype.focus.call(this)
            //this.jq.focus()
        },
        setOptions:function(options){
               this.editor.options=options;
        },
        within: function (e) {
            // debugger
            if (mini.isAncestor(this.el, e.target)) return true;
            // if (this.popup.within(e)) return true;

            if(jQuery(e.target).closest('.el-select-dropdown')[0]) return true
            return false;
        }
    })


  // 获得本组件的dom元素
  var el = this.$refs.view;
  // 创建甘特图对象
  
  var project = this.project = createGantt();
   project.setStyle("width:100%;height:100%");

  
  
  project.render(el);
  // 加载数据
  LoadJSONProject("./static/scripts/test1.txt", project, function () {
   //    project.orderProject();
  // 加载数据后，进度计算一下。
  });
  project.on("cellbeginedit",function(e){
    
     if(e.field=="Notes"){
           if(e.record.Name=="aa"){
              e.editor.setOptions([ { value: 'option111', label: '选项111' }])
           }else if(e.record.Name=="bb"){


           }else{
            e.editor.setOptions([ 
                { value: 'option1', label: '选项1' },
                { value: 'option2', label: '选项2' },
                { value: 'option3', label: '选项3' }])

           }
     }

  })
window.showCriticalPath=function(checked) {
    project.setShowCriticalPath(checked);
}
showCriticalPath(true);
 window.save=function(uid){
     var data=project.getData();
     console.log(data);
 }
window.print=function(uid){
     alert("打印");
 }
 window.track=function(uid){
     window.TrackProject(project);
 }
 window.addTask=function(){
    var newTask = project.newTask();
    newTask.Name = '<新增任务>';    //初始化任务属性

    var selectedTask = project.getSelected();
    if (selectedTask) {
        project.addTask(newTask, "before", selectedTask);   //插入到到选中任务之前
        //project.addTask(newTask, "add", selectedTask);       //加入到选中任务之内            
    } else {
        project.addTask(newTask);
    }
 }
 window.removeTask=function(){
    var task = project.getSelected();
    if (task) {
        if (confirm("确定删除任务 \""+task.Name+"\" ？")) {
            project.removeTask(task);
        }
    } else {
        alert("请选中任务");
    }
 }
 
window.updateTask=function() {
    ShowTaskWindow(project);
}
window.upgradeTask=function(){
    var task = project.getSelected();
    if (task) {
        project.upgradeTask(task);
    } else {
        alert("请选选中任务");
    }
}
window.downgradeTask=function() {
    var task = project.getSelected();
    if (task) {
        project.downgradeTask(task);
    } else {
        alert("请选选中任务");
    }
}


window.changeTopTimeScale=function(value) {
    project.setTopTimeScale(value)
}
window.changeBottomTimeScale=function(value) {
    project.setBottomTimeScale(value)
}
window.zoomIn=function() {
    project.zoomIn();
}
window.zoomOut=function() {
    project.zoomOut();
}

window.onLockClick=function(e) {
    var checked = this.getChecked();
    if (checked) {
        project.frozenColumn(0, 2);
    } else {
        project.unfrozenColumn();
    }
}

window.changeTopTimeScale=function(value) {
    project.setTopTimeScale(value)
}
window.changeBottomTimeScale=function(value) {
    project.setBottomTimeScale(value)
}
window.test=function(){
    var data=project.getData();
    project.loadData(data);

}
window.editRow=function(uid){
   var task=project.getTask(uid);
   console.log(task.Name);
}
 //---------------------------------------------------------------------------------
  project.on("drawcell",function(e){
	  if(e.field=="Name" ){
	  var uid=e.task.UID;
	  e.cellHtml='<a href="javascript:editRow(\'' + uid + '\')">'+e.task.Name+'</a>';
	  }
  })
  project.on("cellbeginedit",function(e){
     if(e.field=="Name"){
      // e.cancel=true; 
     }
  })
  
  }
  }
  }

</script>

<style scoped>
#div1{
  height:100%;
  width:100%;
}
</style>
